
<template>
    <div class="login-box">
        <div  class="login">
            <img src="../../images/login-icon.png" class="logo" >
            <h6 class="title">登录后，解锁更多功能</h6>
            
            
            <div class="ipt-box">
                <img src="../../images/login-phone.png" >
                <input v-model="loginObj.phone" type="text" placeholder="请输入手机号">
            </div>
            <div class="ipt-box">
                <img src="../../images/login-code.png" >

                <input v-model="loginObj.code" type="text" placeholder="请输入验证码">

               <van-button  @click="getVdtCode"  class="btn" round type="primary" color="#f4ea2a">{{vdtText}}</van-button>
               <!-- <span class="btn">重新获取(60s)</span> -->
            </div>

               <van-button  @click="loginEvt" type="primary" block color="#f4ea2a">快速登录</van-button>

            <span class="link" @click="$router.push('/register')">没有账号？注册新用户</span>
        </div>  
        <div class="right">powered by pianyigou-APP &copy; 2021-02-05</div>
    </div>
</template>

<script>
    import { getUserInfoApi, getVdtCodeApi,loginApi } from '../../apis/loginApi'

    export default {

        data() {
            return {
                    loginObj: {
                    phone: '',
                    code: ''
                },
                  // 节流标识
                  vdtText: '获取验证码',
                  // 登录的节流标识
                 loading: false
  
            }
        },

        methods: { 
          async getVdtCode(){
                    // 验证手机号和验证码不能为空

                //   if (!this.regObj.phone||!this.regObj.code){
                //     this.$toast({
                //         message: '手机号和验证码不能为空',
                //         position: 'bottom'
                //     })
                //     return
                //    }

                    // 校验手机号是否输入正确和用户名是否输入
                    if (!/^1[3-9]{1}[0-9]{9}$/.test(this.loginObj.phone)) {
                    // 在全局注册了Toast组件以后，会在prototype上添加一个$toast方法
                        this.$toast({
                            message: '请输入正确的手机号',
                            position: 'bottom' 
                        })
                     return
                  }
                  
                   // 手机号正确设置节流 
                   this.vdtText = '正在获取...'
                   let result = await getVdtCodeApi(this.loginObj.phone)
                   if (result.code !== 200) {
                       console.log(result);
                    this.$toast.fail(result.message)

                      // 需要重置节流标识
                    this.vdtText = '获取验证码'
                    return


                }

                // 提示用户验证码获取成功
                this.$toast.success(`获取验证码成功，验证码：${result.data.code}`)},
                 
                //  自动给验证码框赋值
                // this.loginObj.code='${result.data.code}',
    

              
                async loginEvt(){
                // 判断输入验证码是否正确
                 


                 // 开启节流标识
                this.loading = true
                // 直接发起请求
                let result = await loginApi(this.loginObj)
                // 先校验登录是否成功
                if (result.code !== 200) {
                    this.$toast.fail('登录失败，请重试')
                    // 重置节流标识 -- 用户才可以发起第二次请求
                    this.loading = false
                    return
                    
                }
                // 调用dispatch、commit方法缓存token
                this.$store.commit('common/setToken', result.data.token)

                // 要调用获取用户信息的接口，那么一定要保证vuex中有token数据，所以应该先缓存token，然后发起请求
                let user = await getUserInfoApi(result.data.id)
                // 缓存用户信息到vuex中
                this.$store.commit('common/setUserInfo', result.data)
                this.$router.push("/Home")

            }
        },
                 
    }
</script>







<style lang="less" scoped>
    @import "../../style/common.less";
    .login-box {
        display: block;
        position: relative;
        height: 100%;
        padding: 4vh 20px 0;
        .logo {
            width: 50px;
        }
        .title { font-size: 16px;
        text-align: center;
        margin-top: 10px;
        }
        
        .login {
            > .ipt-box {
                display: flex;
                padding: 10px 0;
                margin-bottom: 16px;
                border: 1px solid @cdd ;
                border-radius: 50px;
                 > img {
                     height:30px;
                     padding-left:10px;
                     }
                input {
                    flex: 1;
                    height: 32px;
                    background: transparent;
                    border: none;
                    outline: none;
                    text-indent: 12px;
                    font-size: .8rem;
                    // & 与input是同级样式
                    &::-webkit-input-placeholder {
                        font-size: .75rem;
                        color: @cdd;
                        margin-top: 20px;
                    }
                }

                .btn {
                    width: 150px;
                    margin-right: 10px;
                    border-left: solid 1px @cdd;
                    font-size: .7rem;
                    line-height: 16px;
                    text-align: center;        
                }
            }
 
               .van-checkbox {
                margin-top: 24px;
                font-size: .75rem;
               }
               .link {
                display: block;
                margin: 50px 0;
                line-height: 32px;
                font-size: .75rem;
                color: black;
            }
        }

        .right {
            position: absolute;
            left: 0;
            bottom: 16px;
            width: 100%;
            font-size: .65rem;
            color: @cdd;
            text-align: center;
        }
    }
</style>